<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f8f8f8;
        }

        .register-zhuce {
            width: 600px;
            height: 550px;
            background-color: #fff;
            margin: 30px auto;
        }

        .register-zhuce .title {
            overflow: hidden;
            padding: 0 0 20px;
            height: 35px;
            background: url(img/dian-ico.png) repeat-x 0 18px;
            text-align: center;
            font-size: 21px;
            line-height: 33px;
            margin-top: 50px;
            margin-bottom: 10px;
        }

        .register-zhuce .title h3 {
            display: inline;
            background-color: #fff;
            font-weight: 400;
            font-size: 21px;
            color: #555;
        }

        .register-zhuce ul li {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .register-zhuce ul li span {
            display: inline-block;
            width: 85px;

        }

        .register-zhuce ul li input {
            width: 300px;
            height: 45px;
            margin: 15px 0;
            margin-left: 40px;
            outline: none;
            border: 1px solid #555;
            display: block;
            flex-shrink: 0;
            margin-left: 20px;
        }

        .register-zhuce button {
            width: 300px;
            height: 45px;
            margin-left: 120px;
            font-weight: bold;
            background-color: #f42424;
            color: #fff;
            border: 0;
        }

        .register-zhuce span a {
            display: block;
            margin: 15px 0;
            margin-left: 40px;
            color: #555;
            text-decoration: none;
        }

        .register-zhuce .read {
            margin-left: 120px;
            font-size: 12px;
            color: #555;
            margin-bottom: 40px;
            /* text-align: center; */
        }

        .register-zhuce .tishi {
            display: block;
            /* background-color: pink; */
            width: 100px;
            height: 30px;
        }

        .header header {
            display: none;
        }

        .header nav {
            display: none;
        }

        footer .shang {
            display: none;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="register-zhuce">
        <div class="title">
            <h3>账号登录</h3>
        </div>
        <ul>
            <li>
                <span>手机号码</span>
                <input type="text" name="username" id="#dd" class="userna" placeholder="请输入手机号"><span class="tishi"
                    id="tishi1"></span>
            </li>
            <li>
                <span>手机验证码</span>
                <input type="text" name="" id="" placeholder="请输入短信验证码"><span class="tishi"></span>
            </li>
            <li>
                <span>设置密码</span>
                <input type="text" name="userpass" id="" class="userpa" placeholder="请输入密码"><span class="tishi"></span>
            </li>
            <li>
                <span>确认密码</span>
                <input type="text" name="" id="" placeholder="请再次确认密码"><span class="tishi"></span>
            </li>
            <li>
                <span>单位名称</span>
                <input type="text" name="" id=""><span class="tishi"></span>
            </li>
        </ul>
        <div class="read">
            <input type="checkbox"><span>我已阅读并同意<i style="color:darkcyan">《豫扶用户注册协议》</i></span>
        </div>
        <button>立即注册</button>


    </div>
    <footer></footer>
</body>

</html>
<script src="js/jQuery.js"></script>
<script>
    $(".header").load("header.html");
    $("footer").load("fotter.html");
</script>
<!-- <script>

    // let odds = document.querySelector("#dd");
    //  odds.onblur = function () {
    //     $.post("goodsAndShoppingCart/checkUser.php",{
    //     username:$(".userna").val(),
    // },function(resText){
    //     if(resText == 0){
    //         $("#tishi1").html("可以注册")
    //     }else{
    //         $("#tishi1").html("用户名已存在")
    //     } 
    // })

    // let oBtn = document.querySelector("button");
    //  let oSp = document.querySelector("span");
    //  oBtn.onclick = function () {
    //     $.post("goodsAndShoppingCart/addUser.php",{
    //     username:$(".userna").val(),
    //     userpass:$(".userpa").val()
    // }).then(function(resText, status, xhr) {
    //     console.log(resText);
    //     console.log(status);
    //     console.log(xhr);
    // })
    // }

    $("button").click(function(){
        $.post("goodsAndShoppingCart/checkUser.php",{
        username:$(".userna").val(),
    },function(resText){
        console.log(resText);
        if(resText == 1){
            $("#tishi1").html("可以注册");
    //     $.post("goodsAndShoppingCart/addUser.php",{
    //     username:$(".userna").val(),
    //     userpass:$(".userpa").val()
    // }).then(function(resText, status, xhr) {
    //     console.log(resText);
    //     console.log(status);
    //     console.log(xhr);
    // })
    }
    if(resText == 0){
        $("#tishi1").html("用户名已存在");
    }
 })
 })

<!-- </script> -->
<script>
    
//手机号
let reg = /^(15|13|18)\d{9}$/;
// 注册

$(".userna").focus(function () {
    $(this).next().html("");

}).blur(function () {
    console.log(333);
    if (!reg.test($(this).val())) {
        $(this).next().html("账户格式错误");
        // model=false;
    }
});

let regp = /^\d{6}$/;
$(".userpa").focus(function () {
    $(this).next().html("");

}).blur(function () {
    console.log(22);
    if (!regp.test($(this).val())) {
        $(this).next().html("密码格式错误");
    }
});

    $("button").click(function () {
        let _flag = true;
        $.get("goodsAndShoppingCart/checkUser.php", {
            username: $(".userna").val()
        }, function (data) {
            if (Number(data) == 0) {
                $("#tishi1").html("用户名已存在")
                //  alert("用户名已存在");
            } else {
                $.post("goodsAndShoppingCart/addUser.php", {
                    username: $(".userna").val(),
                    userpass: $(".userpa").val()
                }, function (data) {
                    console.log(data);
                    alert("注册成功");
                    location.href = "register.html";
                });

            }
        })
        //         if (!_flag) { 
        //             return false
        //         }
        //         $.post("goodsAndShoppingCart/addUser.php", {
        //             username: $(".userna").val(),
        //             userpass: $(".userpa").val()
        //         }, function (data) {
        //             console.log(data);
        //             // alert("注册成功");
        //             location.href = "register.html";
        //         });
    });

</script>